<template>
  <div class="top ">
    <div class="container flex align-center  text-center">
      <div class="nav flex align-center ">
        <div>版权所有：Copyright©2016-2019 xxxxxxxxxxxx版权所有</div>
           <div v-for="(item, index) in navList" :key="index">
          {{ item.text }}
          <span v-if="index != navList.length-1">|</span>

        </div>
       
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "footerBtm",
  data() {
    return {
      navList: [
        {
          text: "首页",
        },
        {
          text: "关于我们",
        },
        {
          text: "新闻中心",
        },
      ],
    };
  },
};
</script>

<style lang="stylus" scoped>
.top {
  width: 100%;
  height: 174px;
  background: rgba(235, 66, 76, 1);
  .container {
    height: 100%;
  }
}

.nav {
  margin: 0 auto;
}

.nav>div {
  margin: 10px 35px;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  padding-bottom: 10px;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  position: relative;

  span {
    position: absolute;
    right: -35px;
    color: #ffffff;
  }
}
</style>
